<template>
  <div class="app-container">
    <div class="filter-container">
      <!-- 搜索筛选 -->
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="搜索：">
          <el-input size="small" v-model="searchForm.account" placeholder="输入卡号"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input size="small" v-model="searchForm.name" placeholder="输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input size="small" v-model="searchForm.phone" placeholder="输入手机号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" icon="el-icon-search" @click="searchData()">搜索</el-button>
          <el-button size="small" type="primary" :disabled="showButton" icon="el-icon-plus" @click="addPage()">添加</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div v-loading="loading" class="content-container">
      <!--列表-->
      <el-table size="small" @selection-change="selectChange" :data="infoData" :height="height" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
        <el-table-column align="center" type="selection" width="50"></el-table-column>
        <el-table-column type="index" width="50" label="序号" :index="tableIndex"> </el-table-column>
        <el-table-column align="center" sortable prop="account" label="卡号" width="120"></el-table-column>
        <el-table-column align="center" sortable prop="name" label="姓名" width="120"></el-table-column>
        <el-table-column align="center" sortable prop="sex" label="性别" :formatter="formatSex" width="120"></el-table-column>
        <el-table-column align="center" sortable prop="phone" label="手机号" width="120"></el-table-column>
        <el-table-column align="center" sortable prop="card" label="身份证"></el-table-column>
        <el-table-column align="center" sortable prop="address" label="家庭住址"></el-table-column>
        <el-table-column align="center" sortable prop="medical" label="病史" ></el-table-column>
        <el-table-column align="center" sortable prop="allergy" label="过敏史" ></el-table-column>
        <el-table-column align="center" sortable prop="drug" label="药物使用史" ></el-table-column>
        <el-table-column align="center" label="操作" width="150" >
          <template slot-scope="scope">
            <el-button size="mini" :disabled="showButton" @click="editPage(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" :disabled="showButton" type="danger" @click="deletePage(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页-->
      <Pagination v-bind:pager="pager" @refreshPage="refreshPage"></Pagination>

      <!--表单-->
      <el-dialog :title="operateType == 'add' ? '新增档案' : '修改档案'" :visible.sync="showForm" width="50%" @click="closeDialog()">
        <TableEdit ref="editForm" v-if="showForm" :formData="formData" @closeDialog="closeDialog"></TableEdit>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="closeDialog()">取消</el-button>
          <el-button size="small" type="primary" :loading="loading" @click="submitForm()">确定</el-button>
        </div>
      </el-dialog>

    </div>
  </div>
</template>

<script>

import Pagination from '@/components/Pagination'
import TableEdit from './edit'
import {getPageData, deleteData} from '@/api/user'
import store from '@/store'

// 分页
const pager = {
  currentPage: 1,
  pageSize: 20,
  total: 20
}
// 请求数据用户
const searchForm = {
  currentPage: 1,
  pageSize: 20,
  name: '',
  account: '',
  phone: '',
  role: '居民'
}
// 表单属性
const formData = {
  id: '',
  account: '',
  name: '',
  password: '123456',
  phone: '',
  sex: 0,
  card: '',
  address: '',
  medical: '',
  allergy: '',
  drug: '',
  role: '居民'
}
export default {
  name: 'UserList',
  data () {
    return {
      loading: false,
      showForm: false,
      height: document.documentElement.clientHeight - 230,
      selectData: [],
      searchForm: searchForm,
      pager: pager,
      infoData: [],
      showButton: true,
      operateType: '',
      formData: formData
    }
  },
  // 注册组件
  components: {
    Pagination, TableEdit
  },
  created () {
    if("管理员" == store.getters.roles) {
      this.showButton = false
    }
    this.getDataList(this.searchForm)
  },
  methods: {
    // 序号续编
    tableIndex (index) {
      return ((this.pager.currentPage - 1) * this.pager.pageSize + index + 1)
    },
    // 性别转换
    formatSex (row, column) {
      let sex = row[column.property]
      if (sex == '0') {
        return '男'
      } else if (sex == '1') {
        return '女'
      } else {
        return ''
      }
    },
    // 查询数据
    searchData () {
      this.getDataList(this.searchForm)
    },
    // 获取数据
    getDataList (parameter) {
      this.loading = true
      getPageData(parameter).then(res => {
        this.loading = false
        this.pager.currentPage = res.body.current
        this.pager.pageSize = res.body.size
        this.pager.total = res.body.total
        this.searchForm.pageSize = res.body.size
        this.infoData = res.body.records
      })
    },
    // 选择复选框事件
    selectChange (val) {
      this.selectData = val
    },
    // 分页插件事件
    refreshPage (param) {
      this.searchForm.currentPage = param.currentPage
      this.searchForm.pageSize = param.pageSize
      this.getDataList(this.searchForm)
    },
    // 显示编辑界面
    addPage () {
      this.operateType = 'add'
      this.showForm = true
      this.formData.id = ''
      this.formData.account = ''
      this.formData.name = ''
      this.formData.password = '123456'
      this.formData.phone = ''
      this.formData.card = ''
      this.formData.sex = 0
      this.formData.address = ''
      this.formData.medical = ''
      this.formData.allergy = ''
      this.formData.drug = ''
      this.formData.role = '居民'
    },
    // 显示编辑界面
    editPage (index, row) {
      this.operateType = 'edit'
      this.showForm = true
      this.formData.id = row.id
      this.formData.account = row.account
      this.formData.name = row.name
      this.formData.password = row.password
      this.formData.card = row.card
      this.formData.phone = row.phone
      this.formData.sex = row.sex
      this.formData.address = row.address
      this.formData.medical = row.medical
      this.formData.allergy = row.allergy
      this.formData.drug = row.drug
      this.formData.role = row.role
    },
    closeDialog () {
      this.showForm = false
      this.$refs.editForm.clearForm()
      this.searchData()
    },
    // 表单保存事件
    submitForm () {
      this.$refs.editForm.submitForm()
    },
    // 删除
    deletePage (index, row) {
      this.$confirm('确定要删除吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteData(row.id).then(res => {
          if (res.message == "success" ) {
            this.getDataList(this.searchForm)
            this.$message({
              type: 'success',
              message: "删除成功！"
            })
          } else {
            this.$message({
              type: 'info',
              message: res.message
            })
          }
        })
      })
    }

  }
}
</script>

<style scoped>
</style>
